<template>
  <view
    class="detail-bottom-operating safe-area-inset-bottom"
    :data-theme="theme"
  >
    <view
      class="he-buttons"
      :class="newStatus === 100 ? 'flex align-center justify-between' : 'fr'"
    >
      <button
        class="cu-btn he-btn"
        v-if="newStatus >= 203 && isEvaluate === 0"
        @click="navigateTo('/pages/order/evaluation?id=' + orderId)"
      >
        评价晒单
      </button>
      <button
        class="cu-btn he-btn"
        v-if="newStatus === 202"
        @click="receipt = true"
      >
        确认收货
      </button>
      <template v-if="newStatus === 100">
        <view class="he-pay-price flex align-center">
          <text class="he-label">实付金额</text>
          <text class="he-value">¥{{ payAmount }}</text>
        </view>
        <!-- #ifdef MP-WEIXIN -->
        <button
          class="cu-btn he-btn he-buy"
          @click="onPay()"
          v-if="getBasicSetting.run_status === 1"
        >
          立即支付
        </button>
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <he-open-subscribe
          @open-subscribe-success="onPay"
          :template-id="tmplIds"
          v-if="getBasicSetting.run_status === 1"
        >
          <button class="cu-btn he-btn he-buy">立即支付</button>
        </he-open-subscribe>
        <!-- #endif -->
        <button class="cu-btn he-disabled" v-else>已打样</button>
      </template>
    </view>
    <he-empty-popup
      :empty-style="{ height: '146rpx', lineHeight: '146rpx' }"
      v-model="receipt"
      title="确认收到货了吗？"
      @confirm="receiptConfirm"
    ></he-empty-popup>
    <after-receipt v-model="isAfterReceipt" :order-id="orderId"></after-receipt>
  </view>
</template>

<script>
import heEmptyPopup from "@/components/he-empty-popup.vue";
import afterReceipt from "./after-receipt.vue";
import heOpenSubscribe from "../../../components/he-open-subscribe.vue";

export default {
  name: "detail-bottom-operating",
  components: {
    heEmptyPopup,
    afterReceipt,
    heOpenSubscribe,
  },
  props: {
    status: Number,
    orderSn: String,
    totalAmount: String,
    orderId: Number,
    payAmount: String,
    isEvaluate: Number,
  },
  data() {
    return {
      receipt: false,
      isAfterReceipt: false,
    };
  },
  computed: {
    newStatus: {
      get: function () {
        return this.status;
      },
      set: function (val) {
        this.$emit("update:status", val);
      },
    },
    tmplIds: function () {
      return [
        this.$store.getters["setting/subscribe"].order_pay,
        this.$store.getters["setting/subscribe"].order_send,
      ];
    },
  },
  methods: {
    onPay: function () {
      let _this = this;
      // #ifdef MP_WEIXIN
      wx.requestSubscribeMessage({
        tmplIds: _this.tmplIds,
        success: function () {},
        fail: function () {},
        complete: function () {
          _this.submit();
        },
      });
      // #endif
      // #ifdef H5
      this.submit();
      // #endif
    },
    // 收货订单操作
    receiptConfirm: function () {
      let _this = this;
      this.$heshop
        .order("put", {
          id: this.orderId,
          behavior: "received",
        })
        .then(function () {
          _this.newStatus = 203;
          _this.isAfterReceipt = true;
        })
        .catch(function (err) {
          _this.$toError(err);
        });
    },
    navigateTo: function (url) {
      uni.navigateTo({
        url: url,
      });
    },
    submit: function () {
      let _this = this;
      this.$heshop
        .pay({
          order_sn: this.orderSn,
        })
        .then(function (data) {
          // #ifdef MP_WEIXIN
          _this.newStatus = 201;
          uni.navigateTo({
            url:
              "/pages/order/successful?order_id=" +
              _this.orderId +
              "&order_sn=" +
              _this.order_sn,
          });
          // #endif
          // #ifdef H5
          _this.$wechat.chooseWXPay({
            nonceStr: data.nonceStr,
            packAge: data.package,
            paySign: data.paySign,
            signType: data.signType,
            timestamp: data.timeStamp,
            success: function () {
              _this.newStatus = 201;
              uni.navigateTo({
                url:
                  "/pages/order/successful?order_id=" +
                  _this.orderId +
                  "&order_sn=" +
                  _this.order_sn,
              });
            },
            fail: function (err) {
              _this.$toError(err);
            },
            cancel: function () {},
          });
          // #endif
        })
        .catch(function (err) {
          if (err.status === 403) {
            _this.$h.toast(err.data.message);
            _this.$store.dispatch("setting/resetting");
            setTimeout(function () {
              uni.navigateBack({
                delta: 1,
              });
            }, 1000);
          }
        });
    },
  },
};
</script>

<style scoped lang="scss">
.detail-bottom-operating {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #ffffff;
  z-index: 1;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
}

.he-buttons {
  padding: 20px;
  height: 96px;
}

.he-btn {
  background: #ffffff;
  border-width: 1px;
  border-style: solid;
  @include border_color("border_color");
  border-radius: 28px;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 500;
  height: 56px;
  @include font_color("font_color");
}

.he-buy {
  color: #ffffff;
}

.he-pay-price {
  font-family: PingFang SC;
}

.he-label {
  font-size: 24px;
  font-weight: 500;
  color: #222222;
}

.he-value {
  font-size: 30px;
  font-weight: bold;
  @include font_color("font_color");
  margin-left: 7px;
}

.he-disabled {
  width: 142px;
  height: 56px;
  background: #cccccc !important;
  border-radius: 28px;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff !important;
}
</style>
